<template>
	<view class="success">
		<Result @confirm="confirm" :result="resultContent"></Result>
		<view class="fail-box" v-if="type=='fail'">
			<view class="title">
				拍摄时，请确保身份证 <text class="highlight">边框完整，字体清晰，亮度均匀</text>
			</view>
			<view class="image-box flex-space-between">
				<view class="image-box-item flex-column" v-for="(item,index) in failImageList" :key="index">
					<image :src="item.image" mode="" class="image"></image>
					<view class="bottom flex">
						<uv-icon class="icon" name="checkmark" color="#14BF44" size="14"
							v-if="item.type=='success'"></uv-icon>
						<uv-icon class="icon" name="close" color="#ED3B3B" size="14" v-else></uv-icon>
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Result from ".././components/result.vue"
	import {
		toChannel
	} from "@/api/system"
	export default {
		components: {
			Result
		},
		data() {
			return {
				resultContent: {
					imageIcon: require('@/common/images/img-authentication-successful-dis.png'),
					infoText: "信息认证成功！",
					buttonText: "确认",
					navToText: "返回首页"
				},
				type: 'success',
				failImageList: [{
						image: require('@/common/images/identification/img-correct-example.png'),
						text: '正确拍摄',
						type: 'success'
					},
					{
						image: require('@/common/images/identification/img-error-examples-one.png'),
						text: '边角缺失',
						type: 'error'
					},
					{
						image: require('@/common/images/identification/img-error-examples-two.png'),
						text: '照片模糊',
						type: 'error'
					},
					{
						image: require('@/common/images/identification/img-error-examples-three.png'),
						text: '闪光强烈',
						type: 'error'
					}
				],
				id:''
			}
		},
		computed: {

		},
		created() {},
		onLoad(options) {
			let query = options.type
			if(query){
				let index = query.lastIndexOf("\_");
				if(index == -1){
					this.type = query
				}else{
					this.type = query.substring(0,index);
					this.id =query.substring(index + 1,query.length);
					this.resultContent.imageIcon = '';
					this.resultContent.infoText = '加载中....';
				}
			}
			if (this.type == 'fail' && this.id) {
				this.resultContent = {
					imageIcon: require('@/common/images/img-authentication-failed-dis.png'),
					infoText: "信息认证失败，请重新提交！",
				}
			} 
			if(this.type == 'success' && this.id) {
				// this.resultContent = {
				// 	imageIcon: require('@/common/images/img-authentication-successful-dis.png'),
				// 	infoText: "信息认证成功！",
				// }
				this.getResult();
			}
			
			// this.type = options.type;
			// this.id = options.id;
			// if (this.type == 'fail') {
			// 	this.resultContent = {
			// 		imageIcon: require('@/common/images/img-authentication-failed-dis.png'),
			// 		infoText: "信息认证失败，请重新提交！",
			// 		// buttonText: "重新认证",
			// 		// navToText: "返回首页",
			// 	}
			// } else {
			// 	this.resultContent = {
			// 		imageIcon: require('@/common/images/img-authentication-successful-dis.png'),
			// 		infoText: "信息认证成功！",
			// 		// buttonText: "重新认证",
			// 		// navToText: "返回首页",
			// 	}
			// 	this.getResult();
			// }
		},
		onShow() {},
		methods: {
			confirm() {
				if (this.type == 'success') {
					uni.switchTab({
						url: "/pages/home/index",
					});
				} else {
					this.$nav.push({
						path: "/pages/home/identification/index",
					});
				}

			},
			getResult() {
				toChannel({id:this.id}).then(res => {
					if (res.code == 200) {
						this.resultContent = {
							imageIcon: require('@/common/images/img-authentication-successful-dis.png'),
							infoText: res.msg,
						}
					}else{
						this.resultContent = {
							imageIcon: require('@/common/images/img-authentication-failed-dis.png'),
							infoText: res.msg,
						}
					}
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.fail-box {
		border-top: 1px dotted #c7c7c7;
		margin: R(30px);
		padding: R(40px) 0;

		.title {
			font-size: R(25px);

			.highlight {
				color: #5A95EF;
			}
		}

		.image-box {
			margin-top: R(30px);
			font-size: R(22px);

			&-item {
				.image {
					width: R(130px);
					height: R(79px);
				}

				.bottom {
					margin: R(20px) 0;
				}
			}
		}
	}
</style>